<template>
	<view class="sendBox">
			<view class="descBox">
				<view class="tls">认证须知</view>
				<!-- <view class="text">
					<view>1: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
					<view>2: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
					<view>3: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
				</view> -->
				 <jyf-parser :html="html" ></jyf-parser>
			</view>
		<view class="content">
			<view class="row">
			    <view class="tit"><text>*</text>单位名称:</view>
			    <input class="input" type="text" v-model="info.firmName" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="row">
			     <view class="tit"><text>*</text>统一信息代码:</view>
			    <input class="input" type="text" v-model="info.taxNumber" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="row">
			     <view class="tit"><text>*</text>法人名称:</view>
			    <input class="input" type="text" v-model="info.legalPersonName" placeholder="请输入" placeholder-class="placeholder" />
				<!-- <view class="code">获取验证码</view> -->
			</view>
			<view class="row">
			     <view class="tit"><text>*</text>法人身份证号:</view>
			    <input class="input" type="text" v-model="info.legalIdCard" placeholder="请输入" placeholder-class="placeholder" />
				<!-- <view class="code">获取验证码</view> -->
			</view>
			<view class="row">
			    <view class="tit"><text>*</text>验证码:</view>
			    <input class="input" type="text" v-model="info.code" placeholder="请输入" placeholder-class="placeholder" />
				<button class="code" @click="getVerificationCode" :disabled="disabled">{{ codeMsg }}</button>
				<!-- <view class="code" @click="getVerificationCode">获取验证码</view> -->
			</view>
			<view class="row" style="border: none;">
			    <view class="tit"><text>*</text>营业执照正面:</view>
				
			</view>
			<view class="imgList">
				<view class="imgBox">
					<view class="imageup" v-for="(item,index) in imgUrlarr" :key='index'>
						<image class="imgitem" :src="item" @click="ViewImage"></image>
						<text @click="remove(index)">+</text>
					</view>
						<view class="upload flex-col" @click="ChooseImage">
						<image src="../../static/icon/upload.png"></image>
						<text>上传</text>
					</view>
				</view>
			</view>
			<!-- <view class="imglist">
				<image v-for="(item,index) in imgUrlarr" :src="item" mode=""></image>
				<view class="upload flex-col" @click="ChooseImage">
					<image src="../../static/icon/upload.png"></image>
					<text >上传</text>
				</view>
			</view> -->
			
			<button class="add-btn" @click="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	import OSSUtil from '../../libs/ossUtil.js'
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import jyfParser from "@/components/jyf-parser/jyf-parser"
	export default {
		components: { uniTag },
		name: 'byImgUpload',
		props: {
		    authId: String,
		    imgUrl: String,
		    deleteFlag: Boolean,
		    startShowAction: Function,
		    startDelete: Function,
		    imgActions: Array,
		},
		data(){
			return{
				html:'',
				progress: 0,
				imgUrlarr:[],
				picture:'',
				disabled:false,
				imgleng:0,
				imgData: {
				    visible: false,
				    actions: this.imgActions
				},
				info:{
					firmName:'',
					legalPersonName:"",
					taxNumber:"",
					code:"",
					legalIdCard:'',
				},
				codeMsg: '获取验证码',
			}
		},
		onLoad(option) {
			this.gettext()
		},
		methods:{
			
			//获取文本
			gettext(type){
				this.$http.get('/public/getAgreement', {
					type: 11
				}).then(res => {
					if (res.code == 0) {
						this.html = res.data.content
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			async ChooseImage() {
			    let files = await OSSUtil.getImage(); // 选择图片
			    let sign = await OSSUtil.get_STS() // 获取签名等信息
				 
			    let imageSrc = files.tempFilePaths[0];
			    let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
			    
			    let uploadTask = uni.uploadFile({
			        url: sign.host,
			        filePath: imageSrc,
			        fileType: 'image',
			        name: 'file',
			        formData: {
			            name: imageSrc,
			            'key': fileName,
			            'policy': sign.policy,
			            'OSSAccessKeyId': sign.accessId,
			            'success_action_status': '200',
			            //让服务端返回200,不然，默认会返回204
			            'signature': sign.signature,
			        },
			        success: (res) => {
						let that = this
						console.log(sign.host+'/'+fileName)
						let img = sign.host+'/'+fileName
						
						this.imgUrlarr=this.imgUrlarr.concat(img)
						console.log(this.imgUrlarr)
			          this.picture = this.imgUrlarr.join(',')
			            uni.showToast({
			                title: '上传成功',
			                icon: 'success',
			                duration: 1000
			            });
			            that.$emit('imgUploaded', {data: sign.host + fileName, authId: this.authId});
			        },
			        fail: (err) => {
			            console.log('uploadImage fail', err);
			            uni.showModal({
			                content: err.errMsg,
			                showCancel: false
			            });
			        }
			    });
			    uploadTask.onProgressUpdate((res) => {
			        console.log("上传进度" + res.progress);
			        this.progress = res.progress;
			    });
				 
			    // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgUrlarr,
					current: e.currentTarget.dataset.url
				});
			},
			remove(index) {
				this.imgUrlarr.splice(index, 1)
			},
			//验证真实姓名
			valideRealName(){
				var regName =/^[\u4e00-\u9fa5]{2,4}$/; 
				if (this.info.firmName == null || this.info.firmName == '') {
					uni.showToast({
						title: '真实姓名不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				} else if (!regName.test(this.info.firmName)) {
					uni.showToast({
						title: '真实姓名格式错误',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
			},
			//验证身份证号
			validePhoneNumber() {
				var myreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (this.info.legalIdCard == null || this.info.legalIdCard == '') {
					uni.showToast({
						title: '身份证号码不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				} else if (!myreg.test(this.info.legalIdCard)) {
					uni.showToast({
						title: '身份证号格式错误',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
			},
			//验证验证码
			getVerificationCode() {
					let phone = uni.getStorageSync('phone')
					let count = 60;
					this.codeMsg = count + 's';
					let timer = setInterval(() => {
						if (count <= 1) {
							clearInterval(timer);
							this.codeMsg = '获取验证码';
							this.disabled = false;
						} else {
							count--;
							this.codeMsg = count + 's';
							//获取验证码
			
							this.disabled = true;
						}
					}, 1000);
					this.$http.get('/sms/getSmsCode', { phone: phone, type: 1 }).then(res => {
						console.log(res);
						if (res.code == '0') {
							uni.showToast({
								title: '验证码已发送',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
				
			},
			//提交认证
			confirm(){
				// var nameFlag = this.valideRealName();
				// if(nameFlag!=false){
					var flag = this.validePhoneNumber();
					if (flag != false) {
						if (this.info.code == null || this.info.code == '') {
							uni.showToast({
								title: '验证码不能为空',
								icon: 'none',
								duration: 2000
							});
							return false;
						}else{
							//调接口
							this.sendValid();
							
						}
						
					}
				// }
				
				
			},
			//认证接口
			sendValid(){
				let params = {
					  code: this.info.code,
					  firmName: this.info.firmName,
					  legalIdCard: this.info.legalIdCard,
					  taxNumber: this.info.taxNumber,
					  legalPersonName:this.info.legalPersonName,
					  type: 2,
					  businessLicense:this.picture
					}
				this.$http.post('/userCenter/userCertification', params).then(res => {
					if (res.code == '0') {
						console.log(res.data)
					    let url = encodeURIComponent(res.data.shortLink)
						uni.navigateTo({
							url:'../home/sign?url='+url
						})
					}else{
						uni.showToast({
							icon:"none",
							title:res.message
						})
					}
				})
			}
			
		}
		
	}
</script>

<style scoped lang="scss">
	.sendBox{
		.descBox{
			padding: 30upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.tls{
				font-size: 36upx;
				color: #22222A;
				padding-bottom: 30upx;
				font-weight: bold;
			}
			.text{
				color: #666666;
				font-size: 30upx;
				>view{
					line-height: 40upx;
					padding-bottom: 30upx;
					&:last-child{
						padding-bottom: 0;
					}
				}
			}
		}
		
		.content{
			height: 100%;
			background: #fff;
			.upload {
				width: 220upx;
				height: 146upx;
				background: rgba(235, 235, 240, 1);
				border-radius: 8upx;
				align-items: center;
				 // margin: 0 30upx;
				justify-content: center;
				color: #9a9a9a;
				font-size: 24upx;
				image {
					width: 34upx;
					height: 34upx;
					margin-bottom: 14upx;
				}
			}
			.row {
			    display: flex;
			    align-items: center;
			    position: relative;
			    margin: 0 30upx;
			    height: 110upx;
			    background: #fff;
				border-bottom: 1upx solid rgba(238,238,238,1);
				&:last-child{
					border: none;
				}
			    .tit {
			        flex-shrink: 0;
			        width: 204upx;
			        font-size: 30upx;
					color: #22222A;
					>text{
						color: #FF1A1A;
						font-size: 30upx;
					}
			    }
				
				.code{
					width:180upx;
					height:48upx;
					background:rgba(253,88,10,1);
					border-radius:8upx;
					font-size: 24upx;
					color: #fff;
					text-align: center;
					line-height: 48upx;
				}
			    .input {
			        flex: 1;
			        font-size: 30upx;
			
			    }
			
			    .icon-shouhuodizhi {
			        font-size: 36upx;
			
			    }
			}
			.add-btn {
			    width:600upx;
			    height:80upx;
			    background:#FD580A;
			    border-radius:8upx;
				font-size: 30upx;
				color: #fff;
				text-align: center;
				line-height: 80upx;
				margin-top: 70upx;
			}
		}
		// .imglist{
		// 	padding: 30upx;
		// 	display: flex;
		// 	flex-wrap:wrap;
		// 	image{
		// 		width: 30%;
		// 		height: 73px;
		// 		margin-right: 3%;
		// 		margin-bottom: 20upx;
		// 	}
		// }
		.imgList {
			// width: calc(100% + 10upx);
			padding: 0;
			display: flex;
			flex-wrap: wrap;
		
			view {
				// flex: 0 0 calc(30% - 10upx);
				// height: 146upx;
				width: 220upx;
				margin-right: 15upx;
				margin-bottom: 15upx;
		
				&:nth-child(3n) {
					margin-right: 0;
				}
		
				&.imgBox {
					width:96%;
					display: flex;
					flex-wrap: wrap;
					margin: auto;
					.imageup{
						height: 146upx;
						width: 200upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
						position: relative;
						.imgitem {
							height: 146upx;
							width: 200upx;
						}
						text{
							position: absolute;
							right: -18rpx;
							top: -6px;
							width: 40rpx;
							height: 40rpx;
							font-size: 40rpx;
							text-align: center;
							color: white;
							cursor: pointer;
							line-height: 32rpx;
							border-radius: 100%;
							transform: rotate(45deg);
							background: rgba(0, 0, 0, 0.5);
						}
					}
		
					
				}
		
				&.upload {
					background: rgba(235, 235, 240, 1);
					border-radius: 8upx;
					align-items: center;
					justify-content: center;
					color: #9A9A9A;
					font-size: 24upx;
		
					image {
						width: 34upx;
						height: 34upx;
						margin-bottom: 14upx;
					}
				}
			}
		}
	}
</style>
